import { useMemo } from "react";
import { useComponentConfigStore } from "../../../stores/component-config";

import { MaterailItem } from "./MeterialItem";

export function Meterial() {
    const { componentConfig } = useComponentConfigStore();

    const components = useMemo(()=>{
        return Object.values(componentConfig).filter(item => item.name !== 'Page');
    }, [componentConfig])

    return <div>
        {components.map((item, index) => {
            return <MaterailItem name={item.name} key={item.name + index} desc={item.desc} />
        })}
    </div>
}

